<template xmlns:v-on="http://www.w3.org/1999/xhtml">
<div>
   <div class="minapplication defaultPage" v-show="imgahg">
    
    </div>

    <div class="set" style="height: 100%;" v-show="noimg">
        <div class="main_left">
        	<div class="approve">资讯</div>
                <ul>
                    <li v-for="(list,index) in chidlists" :key='index' :class="{sadeNav:isSadeNav == index}" >
                        <div>
                            <p @click="sadeNavClick(list,index)" id="listColumnName">{{list.columnName}}</p>
                            <div class="nodeChildren" v-show="isSadeNav == index" v-for="(children,ind) in list.children" :key="ind" @click='nodeChildren(index,ind)' :class="{sadeNavchildren:isSadeNavchildren == ind}">
                                <span>{{children.columnName}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            <!-- <el-tree
  :data="data"
  :props="defaultProps"
  accordion
  highlight-current
  @node-click="handleNodeClick">
</el-tree> -->
        </div>
        <div class="main_right">
            <router-view></router-view>
        </div>
    </div>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "set",
  data() {
    return {
      imgahg: false,
      noimg: true,
      isSadeNavchildren: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "columnName"
      },
      isSadeNav: "",
      chidlists: [
        {
          name: "企业文化",
          push: "consulting"
        }
        // {
        //     name:'已发公告',
        //     push:'alreadysentNotice'
        // },
      ]
    };
  },

  created: function() {
    this.setDate();
    // sessionStorage.removeItem('columnId')
    let self = this;
    self
      .getcolumnGet({
        oid: sessionStorage.getItem("orgId")
      })
      .then(data => {
        if (data.code == "000000") {
          if (data.data.length == 0) {
            self.chidlists = [
              {
                columnName: "企业文化",
                indexUrl: "consulting"
              },
              {
                columnName: "培训资料",
                indexUrl: "induction"
              },
              {
                columnName: "入职培训",
                indexUrl: "induction"
              },
              {
                columnName: "在职培训",
                indexUrl: "onJob"
              },
              {
                columnName: "公司制度",
                indexUrl: "regime"
              }
            ];
          } else {
            self.chidlists = data.data;
            self.data = data.data;
            // sessionStorage.setItem("columnId", data.data[0].columnId);
          }
        } else {
          this.$message({
            type: "info",
            message: data.msg
          });
        }
      })
      .catch(msg => {
        this.$message({
          type: "info",
          message: msg.statusText
        });
      });
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "setDate"
  },
  methods: {

    nodeChildren(index, ind) {
      this.isSadeNavchildren = ind;
      var pathStr = this.chidlists[index].children[ind].indexUrl;
      var url = "/home/message/" + pathStr;
      this.$router.push({
        path: url
      });
      sessionStorage.setItem(
        "columnId",
        this.chidlists[index].children[ind].columnId
      );
      sessionStorage.setItem(
        "columnShowType",
        this.chidlists[index].children[ind].columnShowType
      );
      this.isSadeNav = 1;
    },
    //  根据路径匹配标记导航
    setDate: function() {
      var psthStr = this.$route.path.split("/")[3];
      var pathQuery = this.$route.query.name
      switch (psthStr) {
        case "consulting":
          this.isSadeNav = 0;
          break;
        case "compileMessage":
          this.isSadeNav = 0;
          break;
        case "induction":
          this.isSadeNav = 1;
          this.isSadeNavchildren = 0
          break;
        case "addinduction":
          this.isSadeNav = 1;
          break;
        case "compileinduction":
          this.isSadeNav = 1;
          break;
        case "onJob":
          this.isSadeNav = 1;
          this.isSadeNavchildren = 1
          break;
        case "addonJob":
          this.isSadeNav = 1;
          break;
        case "compileonJob":
          this.isSadeNav = 1;
          break;
        case "regime":
          this.isSadeNav = 2;
          break;
        case "addregime":
          this.isSadeNav = 2;
          break;
        case "compileregime":
          this.isSadeNav = 2;
          break;
      }
      switch (pathQuery) {
        case "induction":
          this.isSadeNav = 1;
          this.isSadeNavchildren = 0
          break;
        case "onJob":
          this.isSadeNav = 1;
          this.isSadeNavchildren = 1
          break;
        case "regime":
          this.isSadeNav = 2;
          break;
        case "consulting":
          this.isSadeNav = 0;
          break;
      }
    },
    sadeNavClick(list, index) {
      // list.clickNode = !list.clickNode
      this.isSadeNav = index;
      this.isSadeNavchildren = 0;
      var pathStr = this.chidlists[index].indexUrl;
    
      if(list.children){
          sessionStorage.setItem("columnId", list.children[0].columnId);
      }else{
          sessionStorage.setItem("columnId", this.chidlists[index].columnId);
      }
      sessionStorage.setItem('columnShowType',this.chidlists[index].columnShowType)
      var url = "/home/message/" + pathStr;
      this.$router.push({
        path: url
      });
    },
    ...mapActions(["getcolumnGet"])
  }
};
</script>
<!--私有样式-->
<style scoped>
#listColumnName {
  width: 100%;
  padding-left: 15px;
}

.nodeChildren {
  padding-left: 20px;
  animation: nodeChildrens 0.8s forwards;
}
@keyframes nodeChildrens {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 40px;
    opacity: 1;
  }
}
.sadeNav {
  color: #fcb298 !important;
  background: rgba(231, 116, 74, 0.1);
}
.sadeNavchildren {
  color: #fcb298 !important;
  background: rgba(231, 116, 74, 0.1);
}
.approve {
  text-align: center;
  line-height: 40px;
  background-color: #e7744a;
  color: #fff;
  font-size: 14px;
  border-top-left-radius: 4px;
}
.main_left {
  border-radius: 4px;
  float: left;
  width: 260px;
  height: 100%;
  background: #fffaf9;
  border-right: 1px solid #ccc;
}
.main_left li {
  cursor: pointer;
  line-height: 40px;
  color: #000;
  font-size: 14px;
}
.main_left li:hover {
  background: #f7f2f1;
}
.main_left li div span {
  margin-left: 15px;
}
.main_right {
  width: 820px;
  height: 100%;
  float: left;
}
.defaultPage {
  width: 100%;
  height: calc(100vh - 200px);
  background: url("/static/img/defaultPage.png") no-repeat;
  background-size: 100% 100%;
  overflow-y: hidden;
}
</style>

